<template>
    <div class="main_product">
        <div class="router_product">
            <router-link to="/goHome/{username}" class="link_product">回到首页</router-link>
        </div>
        <el-card class="card_product">
            <el-table class="product" :data="product">
                <el-table-column prop="productId" label="productId">
                    <div class="item" slot-scope="scope">
                        <div>{{scope.row.productId}}</div>
                    </div>
             </el-table-column>
                <el-table-column prop="categoryId" label="categoryId">
                    <div class="item" slot-scope="scope">
                        <div>{{scope.row.categoryId}}</div>
                    </div>
                </el-table-column>
                <el-table-column prop="name" label="name" >
                    <div class="item" slot-scope="scope">
                        <el-input class="item__input" v-model="scope.row.name" placeholder="请输入内容"/>
                    </div>
                </el-table-column>
                <el-table-column prop="description" label="description">
                    <div class="item" slot-scope="scope">
                        <div>{{scope.row.description}}</div>
                    </div>
                </el-table-column>
                <el-table-column label="查看商品" >
                    <template slot-scope="scope">
		                <router-link :to="{name:'Item', params:{id:scope.row.productId}}">
                            <el-button type="info">详情</el-button>
                        </router-link>
	                </template>
                </el-table-column>
                <el-table-column label="修改商品" >
                    <template slot-scope="scope">
		                <el-button @click="updateProduct(scope.row)" type="primary">
		                    <span>修改信息</span>
		                </el-button>
	                </template>
                </el-table-column>
                <el-table-column label="删除商品" >
                    <template slot-scope="scope">
		                <el-button @click="deleteProduct(scope.row.productId)" type="danger">
		                    <span>删除</span>
		                </el-button>
	                </template>
                </el-table-column>
            </el-table>
        </el-card>
        <div class="btn_product">
            <el-button @click="add=>{this.$router.push({name:'Add' , params:{type:this.type}})}" type="primary">添加</el-button>
            <el-button @click="back" type="primary" style="margin-left: 50px;">返回</el-button>
        </div>
        
    </div>
</template>

<script>
import axios from 'axios'
import { jwtDecode } from 'jwt-decode'

export default {
    name:   'Product',
    data(){
        return{
            username    : jwtDecode(localStorage.getItem('token')).username,
            token       : localStorage.getItem('token'),
            product     : '',
            categoryId : this.$route.params.id,
            type:   'product',
        }
    },
    methods : {
        //使用结构赋值进行错误处理
        promise_error_process(promise){
            return promise.then(result=>[null,result])
                           .catch(err=>[err,null])
        },
        async getProductByAjax(){
            const response = await axios({
                url :  `http://localhost:8081/products/${this.categoryId}`,
                method : 'GET',
                withCredentials : true,
                headers :{
                    'Authorization': this.token // 将token放在请求头中
                }
            })
            return response
        },
        async getProduct(){
            const [err,result] = await this.promise_error_process(this.getProductByAjax())
            if(err){
                console.log('请求错误')
            }else{
                console.log(result.data.data)
                this.product = result.data.data
            }
        },
        async updateByAjax(product_one){
            const response = await axios({
                url    :`http://localhost:8081/products/${product_one.productId}`,
                method : 'PUT',
                withCredentials : true,
                headers :{
                    'Content-Type' : 'application/json',
                    'Authorization': this.token // 将token放在请求头中
                },
                data : product_one
            })
            return response
        },
        async updateProduct(product_one){
            const [err,result] = await this.promise_error_process(this.updateByAjax(product_one))
            if(err){
                console.log('请求错误')
            }else{
                console.log(result)
            }
        },
        async deleteByAjax(id){
            const response = await axios({
                url :  `http://localhost:8081/products/${id}`,
                method : 'DELETE',
                withCredentials : true,
                headers :{
                    'Authorization': this.token // 将token放在请求头中
                },
            })
            return response
        },
        async deleteProduct(id){
            console.log(id)
            const [err,result] = await this.promise_error_process(this.deleteByAjax(id))
            if(err){
                console.log('请求错误')
            }else{
                console.log(result)
                this.product = this.product.filter(item => item.productId != id)
            }
        },
        back(){
            this.$router.push({name:  'Category'})
        }
    },
    created(){
        this.getProduct() 
    },
    
}
</script>

<style scoped>
.main_product{
    text-align: center;
}
.router_product{
    text-align: left;
    padding: 30px;
    margin-left: 15%;
}
.link_product{
    text-decoration: none;
    font-size: 20px;
}
.card_product{
    width: 70%;
    margin-left: 15%;
    padding: 50px;
}
.btn_product{
    padding-top: 50px;
}
</style>